<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="script/bootstrap-3.3.7.min.css">

    <title>Fetch</title>
    <link rel="stylesheet" href="script/jquery-ui.1.10.4.css">  <!-- 注意顺序-->
    <style>
        #tog {
            text-align: center;
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    </style>
    <script src="script/jquery-1.10.min.js"></script>
    <script src="script/jquery-ui.1.10.4.min.js"></script>
    <script>
        function formatData(data) {
            console.log(typeof data)

//            JSON.parse(jsonstr); //可以将json字符串转换成json对象
            var jsonstr = JSON.stringify(data); //可以将json对象转换成json对符串
            console.log(typeof jsonstr)
        }

        $(document).ready(function () {
            $("#ab").click(function () {
                fetch("http://127.0.0.1:8000/study/get_user/", {
                    method: 'POST',
                    // headers 加入 json 格式，请求的格式
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    // body 將 json 轉字串送出
                    body: JSON.stringify({
                        email: '中文',
                        password: '12345678'
                    })
                }).then((response) => { //
                    if (response.status == 200) {
                        return response.json(); // 返回给下一步的jsonData
                    }
                }).then((jsonData) => {
                    console.log(jsonData);
                }).catch((err) => { // 只有网络错误
                    console.log('錯誤:', err);
                })
            })

        })
    </script>
</head>
<body>
<div class="container">
    <div class="row">

    </div>

    <div class="row">
        <div id="tog">

        </div>
        <!-- 颜色style -->
    </div>

    <div class="row">
        <!-- margin-bottom: 10px;  外边距  margin-top: 20px 行间距-->
        <div class="col-md-3" style="margin-bottom: 10px;margin-top: 20px;">
            <div class="btn btn-success" id="ab">Fetch</div>

        </div>
    </div>

</div>


</body>
</html>